<template>
  <div>
    <el-drawer :title="title" :visible.sync="show" size="70%">
      <el-container class="main_container">
         <el-main>
           <el-card>
             <div slot="header" class="clearfix">
                 <span>订单信息</span>
               </div>
             <el-descriptions direction="vertical" :column="3" border>
               <el-descriptions-item label="订单编号">{{order.orderNo}}</el-descriptions-item>
               <el-descriptions-item label="物品数量">{{order.nums}}</el-descriptions-item>
               <el-descriptions-item label="客户">{{order.clientName}}</el-descriptions-item>
             </el-descriptions>
           </el-card>
           <el-card>
               <div slot="header" class="clearfix">
                 <span>派车信息</span>
               </div>
               <el-form :model="form">
                 <el-row>
                   <el-col :span="12">
                     <el-form-item label="线路">
                       <el-select v-model="form.lineId" placeholder="请选择线路" clearable size="small">
                         <el-option v-for="item in lineOptions" :key="item.id" :label="item.name"
                           :value="item.id" />
                       </el-select>
                     </el-form-item>
                   </el-col>
                   <el-col :span="12">
                     <el-form-item label="日期选择">
                       <el-date-picker clearable size="small" v-model="querySchedule.day" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                         placeholder="请选择车次日期" @change="dateChange">
                       </el-date-picker>
                     </el-form-item>
                   </el-col>
                 </el-row>
                 <el-row>
                   <el-col>
                     <el-card>
                       <div slot="header" class="clearfix">
                         <span>车辆安排</span>
                         <el-button style="float: right; padding: 3px 0" type="text" @click="add">新增</el-button>
                       </div>
                       <el-descriptions direction="vertical" v-for="(item,index) in form.items" :column="4" border style="margin-bottom: 15px;">
                         <el-descriptions-item label="车次">
                           <el-autocomplete
                           placeholder="请选择车次"
                           :fetch-suggestions="scheduleSearch"
                           value-key="scheduleDayName"
                           :popper-append-to-body="false"
                           v-model="item.scheduleDayName"
                           @select="scheduleChange($event,item)">
                           <template slot-scope="{ item }">
                               <el-descriptions :column="2" border>
                                 <el-descriptions-item label="车次">{{item.name}}</el-descriptions-item>
                                 <el-descriptions-item label="日期">
                                   {{ parseTime(item.day, '{y}-{m}-{d}') }}
                                 </el-descriptions-item>
                               </el-descriptions>
                             </template>
                           </el-autocomplete>
                         </el-descriptions-item>
                         <el-descriptions-item label="车辆">
                           <el-select v-model="item.carId" placeholder="请选择车辆" clearable size="small" @change="carChange($event,item)">
                             <el-option v-for="item in scheduleDtlOptions" :key="item.carId" :label="item.carNumber"
                               :value="item.carId" />
                           </el-select>
                         </el-descriptions-item>
                         <el-descriptions-item label="司机"><el-input v-model="item.driverName"/></el-descriptions-item>
                         <el-descriptions-item label="操作"><el-button type="danger" icon="el-icon-delete" size="mini" @click="del(index)">删除</el-button></el-descriptions-item>
                         <el-descriptions-item>
                           <el-table :data="item.dtlItems">
                             <el-table-column label="编号" prop="pno"></el-table-column>
                             <el-table-column label="名称" prop="name"></el-table-column>
                             <el-table-column label="数量" prop="nums"></el-table-column>
                             <el-table-column label="分配" prop="nums">
                               <template slot-scope="scope">
                                 <el-input v-model="scope.row.shares"/>
                               </template>
                             </el-table-column>
                           </el-table>
                         </el-descriptions-item>
                       </el-descriptions>
                       <!-- <el-table :data="form.items" border stripe>
                         <el-table-column label="车次" align="center">
                           <template slot-scope="scope">
                             <el-autocomplete
                             placeholder="请选择车次"
                             :fetch-suggestions="scheduleSearch"
                             value-key="scheduleDayName"
                             :popper-append-to-body="false"
                             v-model="scope.row.scheduleDayName"
                             @select="scheduleChange($event,scope.row)">
                             <template slot-scope="{ item }">
                                 <el-descriptions :column="2" border>
                                   <el-descriptions-item label="车次">{{item.name}}</el-descriptions-item>
                                   <el-descriptions-item label="日期">
                                     {{ parseTime(item.day, '{y}-{m}-{d}') }}
                                   </el-descriptions-item>
                                 </el-descriptions>
                               </template>
                             </el-autocomplete>
                           </template>
                         </el-table-column>
                         <el-table-column label="车辆" align="center">
                           <template slot-scope="scope">
                             <el-select v-model="scope.row.carId" placeholder="请选择车辆" clearable size="small" @change="carChange($event,scope.row)">
                               <el-option v-for="item in scheduleDtlOptions" :key="item.carId" :label="item.carNumber"
                                 :value="item.carId" />
                             </el-select>
                           </template>
                         </el-table-column>
                         <el-table-column label="司机" align="center">
                           <template slot-scope="scope">
                             <el-input v-model="scope.row.driverName"/>
                           </template>
                         </el-table-column>
                         <el-table-column label="数量" align="center">
                           <template slot-scope="scope">
                             <el-input v-model="scope.row.nums"/>
                           </template>
                         </el-table-column>
                         <el-table-column label="操作" width="90" align="center">
                           <template slot-scope="scope">
                             <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope)">删除</el-button>
                           </template>
                         </el-table-column>
                       </el-table> -->
                     </el-card>
                   </el-col>
                 </el-row>
               </el-form>
           </el-card>
         </el-main>
         <el-footer>
           <div class="footerDivClass">
             <el-button type="primary" @click="submit">确 定</el-button>
             <el-button @click="close()">取 消</el-button>
           </div>
         </el-footer>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
  import {listLines} from '@/api/tms/lines'
  import {getOrder} from "@/api/tms/order";
  import {getScheduleByLineId,getScheduleDtlByScheduleId,dispatch} from '@/api/tms/dispatch'
  export default {
    dicts:['tms_car_work_status'],
    props:{
      title:{
        type:String
      },
      id:{
        type:String
      }
    },
    data(){
      return {
        show:false,
        lineOptions:[],
        scheduleOptions:[],
        scheduleDtlOptions:[],
        form:{
          items:[]
        },
        order:{},
        querySchedule:{
          lineId:undefined,
          day:undefined
        },
      }
    },
    created() {
      this.form = {
        items:[]
      }
    },
    methods:{
      initData(){
        getOrder(this.id).then(response=>{
          this.order = response.data;
          this.form.orderId = response.data.id;
          this.form.lineId = response.data.lineId;
          this.querySchedule.lineId = response.data.lineId;
        }).finally(()=>{
          this.getLines();
        })
      },
      reset(){
        this.form ={
          items:[]
        }
      },

      getLines(){
        listLines().then(response=>{
          this.lineOptions = response.rows;
        })
      },
      getSchedule(){
        getScheduleByLineId(this.querySchedule).then(response=>{
          this.scheduleOptions = response.data;
        })
      },
      //地址选择
      scheduleSearch(queryString,cb){
        var restaurants = this.scheduleOptions;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.scheduleDayName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      add(){
        let strs = this.order.items;
        let dtlItems = []
        this.order.items.forEach(item=>{
          let str = {}
          str.pno = item.pno;
          str.name = item.name;
          str.nums = item.nums;
          dtlItems.push(str)
        })
        let data ={
          scheduleId:undefined,
          carId:undefined,
          driverId:undefined,
          nums:0,
          dtlItems:dtlItems
        }
        this.form.items.push(data)
      },
      del(scope){
        let index = scope.$index;
        this.form.items.splice(index,1)
      },

      open() {
        this.show = true;
        this.initData();
        this.getSchedule();
      },
      close(){
        this.show = false;
      },
      scheduleChange(e,row){
        row.scheduleId = e.id;
        getScheduleDtlByScheduleId({'scheduleId':e.id}).then(response=>{
          this.scheduleDtlOptions = response.data;
        })
      },
      dateChange(e){
        this.querySchedule.day = e;
        this.getSchedule();
      },
      carChange(e,row){
        if(this.scheduleDtlOptions.length > 0){
          this.scheduleDtlOptions.forEach(item=>{
            if(item.carId == e){
              row.driverId = item.driverId;
              row.driverName = item.driverName;
            }
          })
        }
      },
      submit(){
        let form = this.form;
        if(form.items.length == 0){
          this.$modal.msg("请至少新增一条派车记录");
          return
        }
        dispatch(form).finally(()=>{
          this.$modal.msgSuccess("派车成功");
          this.$emit('updateList',true)
          this.close();
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }

</style>
<style>
  .el-popper[x-placement^=bottom] {
    width:auto !important;
  }
</style>
